/* 
  查询学生信息
  页面一加载，就获取学生信息列表
  渲染列表
  封装成函数
  // 点击确认按钮:新增学生
  // 点击取消重置表单
*/
// 一、查询学生信息封装成函数
const getStudentList = async () => {
  // 查询学生信息
  const {data} = await axios.get('/students')
  // console.log(data.data);
  document.querySelector('.total').innerHTML = data.data.length
  // 渲染列表
  document.querySelector('.list').innerHTML = data.data.map(item => `
  <tr>
  <td>${item.name}</td>
  <td>${item.age}</td>
  <td>${item.gender ? '女' : '男'}</td>
      <td>第${item.group}组</td>
      <td>${item.hope_salary}</td>
      <td>${item.salary}</td>
      <td>${item.province}${item.city}${item.area}</td>
      <td>
        <a href="javascript:;" class="text-success mr-3"><i data-id="${item.id}" class="bi bi-pen"></i></a>
        <a href="javascript:;" class="text-danger"><i data-id="${item.id}" class="bi bi-trash"></i></a>
      </td>
    </tr>
  `).join('')
}
// 页面一加载，就获取学生信息列表
 getStudentList()

 let id = ''

// 二、添加学生信息
// 点击添加按钮
document.querySelector('#openModal').addEventListener('click', function() {
  // 显示模态框，
  document.querySelector('form').reset()
  new bootstrap.Modal('#modal').show()
  // 渲染省的数据
  getProvince()
  id = ''
  // id === '' ? tiTle.innerHTML = '添加学员' : tiTle.innerHTML = '编辑学员信息'
  // console.log('添加id', id);
})

// 省市县三级联动
// 加载省：弹出模态框的时候
// 加载市：省的change事件
// 加载县：市的change事件
let province = document.querySelector('[name="province"]')
let city = document.querySelector('[name="city"]')
let area = document.querySelector('[name="area"]')

province.addEventListener('change', function(e){
  getCity()
})
city.addEventListener('change', function() {
  getArea()
})

// 加载省：弹出模态框的时候
const getProvince = async() => {
  const {data} = await axios.get('/api/province')
  // console.log(data);
  province.innerHTML ='<option hidden>--省份--</option>' +   data.data.map(item =>`<option value="${item}">${item}</option>`).join('')
}
// getProvince()

// 加载市：省的change事件
const getCity = async() => {
  const {data} = await axios.get(`/api/city?pname=${province.value}`)
  // console.log(data);
  city.innerHTML = '<option hidden>--城市--</option>' +  data.data.map(item =>`<option value="${item}">${item}</option>`).join('')
}
// getCity()


// // 加载县：市的change事件
const getArea = async() => {
  const {data} = await axios.get(`/api/area?pname=${province.value}&cname=${city.value}`)
  // console.log(data);
  area.innerHTML = '<option hidden>--地区--</option>' +  data.data.map(item =>`<option value="${item}">${item}</option>`).join('')
}
// getArea()


// 三、点击确认按钮:新增学生
document.querySelector('#submit').addEventListener('click',async function() {
  // console.log(111);
  // 一键获取表单数据
  const fd = new FormData(document.querySelector('form'))
  // console.log(fd);
  // 细节：fd会把你的请求头修改为文件格式请求头”如果接口没有文件，需要把fd转为ob5
  const obj = {}
  fd.forEach((value, key) => {
    obj[key] = value
  })
  
  // 非空判断
  /* 
    数组遍历方法应用场景
    forEach:用于遍历数组，修改数组的元素(全选功能)
    map: 映射数组，得到一个新数组(需要使用返回的新数组，例如：Echarts把服务器数组转成表格格式数组)
    some:判断数组中是否有元素满足条件（逻辑或：一真则真，全假为假,非空判断只要有一个是空就行)
    every:判断数组中是否所有的元素”都满足条件（逻辑与：一假则假全真为真。全选功能判断每一个小选框是否都选中)
  */
 if(Object.values(obj).some(item => item === ''|| item === '--城市--'|| item === '--地区--')){
  // console.log(Object.values(obj));
  // if(Object.values(obj).forEach(item => typeof(item) !== Number)){
  //   console.log(Number(item));
  //   return Toast('请输入数字类型')
  // }
  return Toast.fail('输入不能为空')
 }
  
  // 按照接口文档修改数据类型为整数
  obj.age = +obj.age
  obj.gender = +obj.gender
  obj.hope_salary = +obj.hope_salary
  obj.salary = +obj.salary
  obj.group = +obj.group
  // console.log(obj);

  console.log(111);
  // 发请求添加学生信息
  if(id){
    const {data} = await axios.put(`/students/${id}`, obj)
    console.log(data);
    Toast.success('编辑成功')
  }else{
    const {data} = await axios.post('/students', obj)
    console.log(data);
    Toast.success('新增成功')
  }

  // 模拟点击取消按钮清空表单
  document.querySelector('.btn-secondary').click()
  console.log('新增学生');

  // 重新获取学生信息渲染数据
  getStudentList()
})

// 点击取消重置表单
document.querySelector('.btn-secondary').addEventListener('click', function() {
  document.querySelector('form').reset()
  // console.log('重置表单');
})

// 点击右上角的叉号清空表单
document.querySelector('.btn-close').addEventListener('click', function() {
  document.querySelector('form').reset()
  // console.log('叉号清空表单');
})


// 四、编辑学生
/* 
点击编辑，弹出模态框
判断是不是编辑
弹出模态框 显示show() 隐藏:hide()
加载省数据
 */
// 给这个tbody盒子添加点击事件
document.querySelector('tbody').addEventListener('click',async function(e) {
  // console.log(e.target.classList);
  // 判断事件对象是不是修改按钮
  if(e.target.classList.contains('bi-pen')){
    id = e.target.dataset.id
    // console.log('编辑id',id);
    // const  tiTle = document.querySelector('.modal-title')
    // id === '' ? tiTle.innerHTML = '添加学员' : tiTle.innerHTML = '编辑学员信息'
    // 条件成立就显示模态框
    new bootstrap.Modal('#modal').show()
    
    // 数据回显
    // 获取学生详情
    // 渲染学生详情 到模态框
    // console.log(e);

      const {data} = await axios.get(`/students/${e.target.dataset.id}`)
      console.log('获取学生详情',data);

    document.querySelector('[name="name"]').value = data.data.name
    document.querySelector('[name="age"]').value = data.data.age
    document.querySelector('[name="group"]').value = data.data.group
    document.querySelector('[name="hope_salary"]').value = data.data.hope_salary
    document.querySelector('[name="salary"]').value = data.data.salary

    // 非空判断
    // if(data.data.gender){
    //   document.querySelectorAll('[name="gender"]')[1].checked = true
    // }else{
    //   document.querySelectorAll('[name="gender"]')[0].checked = true
    // }

    document.querySelectorAll('[name="gender"]')[data.data.gender].checked = true

    // document.querySelectorAll('[name="gender"]')[1].checked = data.data.gender
    
    // 调用获取省的函数，获取省的数据
    await getProvince()

    // 渲染当前学生的省
    province.value = data.data.province

    // 获取市列表
    await getCity()
    // 渲染当前学生市
    city.value = data.data.city
    
    // 获取县/区列表
    await getArea()
    // 渲染当前学生县/区
    area.value = data.data.area
    
  }else if(e.target.classList.contains('bi-trash')){
    const {data} = await axios.delete(`/students/${e.target.dataset.id}`)
    console.log(data);
    Toast.success('删除成功')
    getStudentList()
  }
  // console.log(e.target.classList.contains('bi-pen'));
})

// 点击退出，清除token退出到登陆页
document.querySelector('#logout').addEventListener('click',function(e) {
  e.preventDefault()
  location.href = './login.html'
  console.log('1234');
  localStorage.setItem('token', '')
  Toast.success('退出成功')
})

